<template>
	<view class="flex-col homepage" style="background-color: #3478F7;">
		<view class="flex-row wrapper">
<!-- 			<u-upload class="upload" :width="150" :height="150" :fileList="fileList1" @afterRead="afterRead"
				@delete="deletePic" name="1" multiple :maxCount="10"></u-upload> -->
				<u-avatar :size="90" @click="avatar" :src="portrait" style="margin-left: 60rpx; margin-top: -20rpx;"></u-avatar>
			<view class="u-line-1 text">小黑</view>
			<view class="u-line-1 text-two">12345678900</view>
<!-- 			<u-icon class="icon-chat-fill" name="chat-fill" :size="64"></u-icon>
					<view class="box">
						 <u-badge :type="type" max="99" :value="value" style="position: relative; left: 530rpx;"></u-badge>
					</view> -->
		</view>
		<view class="wrapper-two">
			<view class="flex-col wraper-row">
				<view class="flex-row box">
					<view class="box-col"></view>
					<image  src="../../static/service/jfjl.png" mode="" style="width: 90rpx; height: 90rpx; position: absolute; left: -10rpx; top: -11rpx; border-radius: 30px;"></image>
					<view class="u-line-1 text-three" @click="jiaofeijilu()">缴费记录</view>

				</view>
				<u-line class="line" margin="0rpx 0rpx 4rpx 0rpx"></u-line>
				<view class="flex-row box-two">
					<view class="box-col"></view>
					<image  src="../../static/service/fkjl.png" mode="" style="width: 90rpx; height: 90rpx; position: absolute; left: -10rpx; top: -11rpx; border-radius: 30px;"></image>
					<view class="u-line-1 text-four" @click="fangkejilu()">访客记录</view>

				</view>
			</view>
			<view class="flex-col wraper-row-two">
				<view class="flex-row box-three">
					<view class="box-col-two"></view>
						<image  src="../../static/service/wdfw.png" mode="" style="width: 90rpx; height: 90rpx; position: absolute; left: -10rpx; top: -10rpx; border-radius: 30px;"></image>
					<view class="u-line-1 text-five" @click="wdfw()">我的房屋</view>

				</view>
				<u-line class="line" margin="0rpx 0rpx 36rpx 0rpx"></u-line>
				<view class="flex-row box-four">
					<view class="box-col-three"></view>
					<image  src="../../static/service/wdcw.png" mode="" style="width: 90rpx; height: 90rpx; position: absolute; left: -10rpx; top: -11rpx; border-radius: 30px;"></image>
					<view class="u-line-1 text-six"  @click="wdcw()">我的车位</view>

				</view>
				<u-line class="line" margin="0rpx 0rpx 40rpx 0rpx"></u-line>
				<view class="flex-row box-five">
					<view class="box-col-four"></view>
						<image  src="../../static/service/wdcl.png" mode="" style="width: 90rpx; height: 90rpx; position: absolute; left: -10rpx; top: -11rpx; border-radius: 30px;"></image>
					<view class="u-line-1 text-seven" @click="wdcl()">我的车辆</view>

				</view>
				<u-line class="line" margin="0.2rpx 0rpx 0rpx 0rpx"></u-line>
			</view>
			<view class="wraper-row-three"></view>
		</view>


	</view>


</template>
<script>
	export default {
		data() {
			return {
				URL: 'http://localhost:80/', //主域名
				user: [],
				portrait: '' ,//用户头像
				uploadFile:'',
				type:"error",
				value:2

			}
		},
		methods: {
            jiaofeijilu() {
                uni.navigateTo({
                    url:'../index/stylepay/livingexpenses/jiaofeixiangqing'
                })
            },
            fangkejilu(){
                uni.navigateTo({
                    url:'../index/example/fangkejilu'
                })
            },
				wdfw(){
					uni.navigateTo({
						url:'./myhouse/myhouse'
					})
				},
        wdcl(){
        	uni.navigateTo({
        		url:'./myvehicle/Myvehicle'
        	})
        },

				wdcw(){
					uni.navigateTo({
						url:'./mystall/mystall'
					})
				},
						//修改用户头像
						avatar() {
							uni.chooseImage({
								count: 1,
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: (res) => {
									this.portrait = res.tempFilePaths[0]
									console.log(this.portrait)
									uni.uploadFile({
										url:this.URL+"systemuser/file/upload",
										filePath: this.portrait,
										name: 'file',
										formData: {
											'user': "test"
										},
										success: (uploadFileRes) => {
											this.uploadFile = JSON.parse(uploadFileRes.data)
											console.log(this.uploadFile.data.url);
											//this.user.portrait = this.uploadFile.data.url
											// uni.removeStorageSync('user');


										}
									});

								}
							})
						},


		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */



	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 100rpx 0rpx 0rpx 2rpx;


		.wrapper {
			width: 748rpx;

			.upload {
				width: 100%;
				padding-left: 24rpx;
			}

			.text {
				width: 254rpx;
				top: 25rpx;
				left: 218rpx;
				position: absolute;
			}

			.text-two {
				width: 252rpx;
				bottom: 60rpx;
				left: 218rpx;
				position: absolute;
			}

			.icon-chat-fill {
				top: -10rpx;
				right: 48rpx;
				position: absolute;
			}
		}

		.wrapper-two {
			width: 100%;
			padding: 474rpx 0rpx 308rpx 0rpx;
			background: #f6f9ff;

			.wraper-row {
				width: 100%;
				padding: 27.8rpx 0rpx 22.2rpx 0rpx;
				background: #fdfeff;

				.box {
					width: 676rpx;
					margin-right: auto;
					margin-bottom: 18rpx;
					margin-left: auto;

					.box-col {
						width: 70rpx;
						height: 70rpx;
						margin-right: 20rpx;
						border-radius: 200rpx;
						background: #e5efff;
					}

					.text-three {
						width: 142rpx;
						margin: 8rpx 266rpx 0rpx 0rpx;
					}

					.section {
						width: 178rpx;
						height: 38rpx;
						margin-top: 14rpx;
					}
				}

				.line {
					width: 100%;
				}

				.box-two {
					width: 676rpx;
					margin-right: auto;
					margin-left: auto;

					.box-col {
						width: 70rpx;
						height: 70rpx;
						margin-right: 20rpx;
						border-radius: 200rpx;
						background: #e5efff;
					}

					.text-four {
						width: 150rpx;
						margin: 10rpx 266rpx 0rpx 0rpx;
					}

					.section-two {
						width: 170rpx;
						height: 38rpx;
						margin-top: 18rpx;
					}
				}
			}

			.wraper-row-two {
				width: 750rpx;
				padding: 47.8rpx 0rpx 6rpx 0rpx;
				border-color: #fdfeff;
				top: 0rpx;
				left: 0rpx;
				background: #fdfeff;
				position: absolute;

				.box-three {
					width: 676rpx;
					margin-right: auto;
					margin-bottom: 28rpx;
					margin-left: auto;

					.box-col-two {
						width: 70rpx;
						height: 70rpx;
						margin-right: 22rpx;
						border-radius: 200rpx;
						background: #e5efff;
					}

					.text-five {
						width: 230rpx;
						margin: 20rpx 166rpx 0rpx 0rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(18, 20, 21, 1);
					}

					.section-three {
						width: 188rpx;
						height: 30rpx;
						margin-top: 30rpx;
					}
				}

				.line {
					width: 100%;
				}

				.box-four {
					width: 678rpx;
					margin-right: auto;
					margin-bottom: 14rpx;
					margin-left: auto;

					.box-col-three {
						width: 70rpx;
						height: 70rpx;
						margin-right: 22rpx;
						border-radius: 200rpx;
						background: #e5efff;
					}

					.text-six {
						width: 230rpx;
						margin: 14rpx 190rpx 0rpx 0rpx;
						font-size: 30rpx;
						font-weight: 500;
					}

					.section-four {
						width: 166rpx;
						height: 38rpx;
						margin-top: 14rpx;
					}
				}

				.box-five {
					width: 684rpx;
					margin: 0rpx 0rpx 48rpx 36rpx;

					.box-col-four {
						width: 70rpx;
						height: 70rpx;
						margin-right: 22rpx;
						border-radius: 200rpx;
						background: #e5efff;
					}

					.text-seven {
						width: 230rpx;
						margin: 20rpx 166rpx 0rpx 0rpx;
						font-size: 30rpx;
						font-weight: 500;
					}

					.section-five {
						width: 198rpx;
						height: 38rpx;
						margin-top: 26rpx;
					}
				}
			}

			.wraper-row-three {
				width: 70rpx;
				height: 70rpx;
				border-radius: 200rpx;
				top: -321388rpx;
				left: 28rpx;
				background: #e5efff;
				position: absolute;
			}
		}
	}
</style>
